<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/template.xhtml"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="head">
        <title>e-Home - Esqueceu sua Senha?</title>
    </ui:define>

    <ui:define name="body">
        <div class="wrap">
            <div class="container">
                <div class="page-header">
                    <div class="logo">
                        <img id="logo" src="/EHomeWebApplication/resources/img/front-logo.png" title="e-Home - Automação Residencial"/>
                    </div>
                </div>

                <h:form id="frmForgotPassword"
                        class="form-forgotPassword">
                    <p:outputPanel rendered="#{trocarSenhaController.passoTrocarSenha eq 1}">
                        <p:remoteCommand id="cmdEnviarCodigo"
                                         name="enviarCodigo"
                                         actionListener="#{trocarSenhaController.enviarCodigoSenha}"
                                         update="@all"
                                         onstart="dlgLoader.show();"
                                         oncomplete="dlgLoader.hide();"
                                         onerror="dlgLoader.hide();"/>

                        <h3 id="modal-title">Esqueceu sua senha?</h3>
                        <h:panelGrid columns="3"
                                     cellpadding="5"
                                     cellspacing="5">
                            <h:outputLabel value="Digite o seu e-mail:"
                                           style="text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-envelope"></i></span>
                                <h:inputText class="input-block-level"
                                             style="width: 350px;"
                                             value="#{trocarSenhaController.email}"/>
                            </p:outputPanel>
                        </h:panelGrid>
                        <p class="center">
                            <h:outputLabel value="Você receberá um código para autorização da troca de senha."/>
                        </p>

                        <p:messages autoUpdate="true" closable="true" showDetail="true" showSummary="true"/>

                        <p class="center">
                            <a href="javascript:void(0);" onclick="enviarCodigo();" data-dismiss="modal" class="btn btn-primary btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-envelope icon-white"></i></span>
                                Enviar
                            </a>
                            <a href="login.jsf" data-dismiss="modal" class="btn btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-share-alt"></i></span>
                                Voltar
                            </a>
                        </p>
                    </p:outputPanel>

                    <p:outputPanel rendered="#{trocarSenhaController.passoTrocarSenha eq 2}">
                        <p:remoteCommand id="cmdConfirmarCodigo"
                                         name="confirmarCodigo"
                                         actionListener="#{trocarSenhaController.confirmarCodigoSenha}"
                                         update="@all"
                                         onstart="dlgLoader.show();"
                                         oncomplete="dlgLoader.hide();"
                                         onerror="dlgLoader.hide();"/>
                        <h3 id="modal-title">Código enviado!</h3>
                        <h:panelGrid columns="3"
                                     cellpadding="5"
                                     cellspacing="5">
                            <h:outputLabel value="Digite o código:"
                                           style="text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-asterisk"></i></span>
                                <h:inputText class="input-block-level"
                                             style="width: 350px;"
                                             value="#{trocarSenhaController.codigoSenhaUsuario}"/>
                            </p:outputPanel>
                        </h:panelGrid>
                        <p class="center">
                            <h:outputLabel value="Clique no botão abaixo para trocar a sua senha."/>
                        </p>

                        <p:messages autoUpdate="true" closable="true" showDetail="true" showSummary="true"/>

                        <p class="center">
                            <a onclick="confirmarCodigo();" data-dismiss="modal" class="btn btn-primary btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-ok icon-white"></i></span>
                                Confirmar
                            </a>
                            <a href="login.jsf" data-dismiss="modal" class="btn btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-share-alt"></i></span>
                                Voltar
                            </a>
                        </p>
                    </p:outputPanel>

                    <p:outputPanel rendered="#{trocarSenhaController.passoTrocarSenha eq 3}">
                        <p:remoteCommand id="cmdTrocarSenha"
                                         name="trocarSenha"
                                         actionListener="#{trocarSenhaController.salvar()}"
                                         update="@all"
                                         onstart="dlgLoader.show();"
                                         oncomplete="dlgLoader.hide();"
                                         onerror="dlgLoader.hide();"/>
                        <h3 id="modal-title">Digite sua nova senha!</h3>
                        <h:panelGrid columns="2"
                                     cellpadding="5"
                                     cellspacing="5">
                            <h:outputLabel value="Digite a sua nova senha: "
                                           style="text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-asterisk"></i></span>
                                <p:password id="txtNovaSenha"
                                            inline="true"
                                            styleClass="input-block-level"
                                            value="#{trocarSenhaController.novaSenha}"
                                            feedback="true"/>
                            </p:outputPanel>
                            <h:outputLabel value="Confirme a sua nova senha: "
                                           style="text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-asterisk"></i></span>
                                <p:password id="txtConfirmarNovaSenha"
                                            inline="true"
                                            styleClass="input-block-level"
                                            value="#{trocarSenhaController.confirmarNovaSenha}"
                                            feedback="true"/>
                            </p:outputPanel>
                        </h:panelGrid>

                        <p:messages autoUpdate="true" closable="true" showDetail="true" showSummary="true"/>

                        <p class="center">
                            <a onclick="trocarSenha();" data-dismiss="modal" class="btn btn-primary btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-ok icon-white"></i></span>
                                Confirmar
                            </a>
                            <a href="login.jsf" data-dismiss="modal" class="btn btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-share-alt"></i></span>
                                Voltar
                            </a>
                        </p>
                    </p:outputPanel>

                    <p:outputPanel rendered="#{trocarSenhaController.passoTrocarSenha eq 4}">
                        <p class="center">
                            <h3 id="modal-title">Senha alterada com sucesso!</h3>
                        </p>
                        <p class="center">
                            <a href="login.jsf" data-dismiss="modal" class="btn btn-primary btn btn-large" id="modal-button">
                                <span class="add-on"><i class="icon-ok icon-white"></i></span>
                                Login
                            </a>
                        </p>
                    </p:outputPanel>
                </h:form>
            </div>
        </div>
    </ui:define>
</ui:composition>